<template>
    <div class='slot-company-info-table'>
        <el-input type="text" auto-complete="off" placeholder="查询列表" class="serch-parent"></el-input>
        <el-button class="slot-btn-top" type="primary" size="small">查询</el-button>
        <el-button class="slot-btn-top" type="primary" size="small" @click="AddUser">新增</el-button>
        <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                  stripe
                  border
                  class="company-table"
                  :height="tableHeight"
                  style="width: 100%;"
                  :header-cell-style="getRowClass"
        >
            <el-table-column
                    fixed
                    type="index"
                    label="*"
                    sortable
                    align="center"
                    width="30">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="name"
                    label="姓名"
                    sortable
                    align="center"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="photo"
                    label="头像"
                    sortable
                    align="center"
                    width="60">
                <template slot-scope="scope">
                    <img :src="'data:image/jpg;base64,' + scope.row.photo" alt="头像" style="width: 35px;height:35px">
                </template>
            </el-table-column>
            <el-table-column
                    prop="gender"
                    label="性别"
                    sortable
                    align="center"
                    :formatter="formatSex"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="账号"
                    sortable
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    sortable
                    align="center"
                    width="220">
            </el-table-column>
            <el-table-column
                    prop="birthday"
                    label="出生日期"
                    sortable
                    align="center"
                    :formatter="formatTimestampToTime"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="idNo"
                    label="身份证号"
                    sortable
                    align="center"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="手机号码"
                    sortable
                    align="center"
                    width="130">
            </el-table-column>
            <el-table-column
                    prop="wxNo"
                    label="微信号"
                    sortable
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    sortable
                    align="center"
                    :formatter="formatTimestampToTime"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注"
                    sortable
                    align="center"
                    width="220">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    sortable
                    align="right"
                    width="80">
                <template slot-scope="scope">
                    <el-button @click="EditUser(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="DelUser(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15,20, 25,30,50, 100]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
        </el-pagination>
        <el-dialog :title="dialogTitle" :visible.sync="isDialog" :model="dialogList">
            <el-form label-position="right" label-width="80px" :model="dialogList">
                <el-form-item label="头像">
                    <el-upload
                            :multiple="true"
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            accept="image/jpeg,image/gif,image/png"
                            :before-upload="beforeAvatarUpload"><!-- scope.row.photo  -->
                        <img v-if="dialogList.photo" :src="'data:image/jpg;base64,' + dialogList.photo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <!--<el-input v-model="dialogList.photo" clearable></el-input>-->
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="dialogList" class="demo-form-inline">
                <el-form-item label="姓名">
                    <el-input v-model="dialogList.name" ></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="dialogList.gender" >
                        <el-option label="【空】" value=""></el-option>
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="dialogList" class="demo-form-inline">
                <el-form-item label="身份证号码">
                    <el-input v-model="dialogList.idNo" clearable></el-input>
                </el-form-item>
                <el-form-item label="出生日期">
                    <el-date-picker type="date" class="picker-date" v-model="dialogList.birthday"
                                    style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="dialogList" class="demo-form-inline">
                <el-form-item label="手机号码">
                    <el-input v-model="dialogList.phone" clearable></el-input>
                </el-form-item>
                <el-form-item label="固定电话">
                    <el-input v-model="dialogList.telephone" clearable></el-input>
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="dialogList" class="demo-form-inline">
                <el-form-item label="微信号">
                    <el-input v-model="dialogList.wxNo" clearable></el-input>
                </el-form-item>
                <el-form-item label="QQ号">
                    <el-input v-model="dialogList.qqNo" clearable></el-input>
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="dialogList" class="demo-form-inline">
                <el-form-item label="用户名">
                    <el-input v-model="dialogList.username" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="dialogList.password" type="password" clearable></el-input>
                </el-form-item>
            </el-form>
            <el-form label-position="right" label-width="80px" :model="dialogList">
                <el-form-item label="地址">
                    <el-input v-model="dialogList.address" clearable></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input
                            type="textarea"
                            autosize
                            v-model="dialogList.remark">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitDialogList">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tableData: [],
                currentPage: 1,
                pagesize: 10,
                tableHeight: document.documentElement.clientHeight - 180,
                isDialog: false,
                dialogTitle: '',
                dialogList: {
                    address: "",
                    birthday: '',
                    createTime: '',
                    deptId: '',
                    gender: "",
                    id: '',
                    idNo: "",
                    menus: '',
                    name: "",
                    password: "",
                    phone: "",
                    photo: '',
                    postId: '',
                    qqNo: "",
                    remark: '',
                    roles: '',
                    telephone: '',
                    username: "",
                    wxNo: "",
                }
            }
        },
        beforeMount() {
            this.getData();
        },
        mounted() {
            let that = this;
            window.onresize = () => {
                return (() => {
                    window.tableHeight = document.documentElement.clientHeight;
                    that.tableHeight = window.tableHeight - 180
                })()
            }
        },
        watch: {
            tableHeight(val) {
                if (!this.timer) {
                    this.tableHeight = val;
                    this.timer = true;
                    let that = this;
                    setTimeout(function () {
                        that.timer = false
                    }, 400)
                }
            }
        },
        methods: {
            getData() {
                let _this = this;
                let _token = sessionStorage.getItem("tokenId");
                // this.$http({
                //     url: '/api/adscm/system/user/allUserPage/1/1000000',
                //     method: 'post',
                //     headers: {'X-Requested-With': 'XMLHttpRequest'},
                //     params: {
                //         tokenId: _token
                //     }
                // }).then(function (res) {
                //     if (res.data.statusCode == 200) {
                //         _this.tableData = res.data.content.records;
                //         _this.$message.success(res.data.desc);
                //     } else {
                //         _this.$message.error("加载失败！请重新加载...");
                //     }
                // }).catch(function (catchres) {
                //     _this.$message.error("加载失败！请重新加载...");
                //     // _this.$router.push({path: '/login'});
                // })
            },
            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
            },
            getRowClass({row, column, rowIndex, columnIndex}) {
                if (rowIndex == 0) {
                    return 'background:#EFEFEF;color:#000;box-shadow: 2px 0px 0px 2px #999;'
                } else {
                    return ''
                }
            },
            timestampToTime(timestamp) {
                let date = new Date(timestamp);
                let Y = date.getFullYear() + '-';
                let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + " ";
                let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ":";
                let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ":";
                let s = (date.getMilliseconds() < 10 ? '0' + date.getMilliseconds() : date.getMilliseconds());
                return Y + M + D + h + m + s;
            },
            formatSex(row, column, cellValue, index) {
                return cellValue == 1 ? '男' : (cellValue == 2 ? '女' : '');
            },
            formatTimestampToTime(row, column, cellValue, index) {
                return this.timestampToTime(cellValue);
            },
            AddUser() {
                let _this = this;
                let _token = sessionStorage.getItem("tokenId");
                _this.isDialog = true;
                _this.dialogTitle = '添加用户';
                this. dialogList = {
                    address: "",
                    birthday: '',
                    createTime: '',
                    deptId: '',
                    gender: "",
                    id: '',
                    idNo: "",
                    menus: '',
                    name: "",
                    password: "",
                    phone: "",
                    photo: '',
                    postId: '',
                    qqNo: "",
                    remark: '',
                    roles: '',
                    telephone: '',
                    username: "",
                    wxNo: "",
                }

                // this.$http({
                //     url: '/api/adscm/system/user/allUserPage/1/1000000',
                //     method: 'post',
                //     headers: {'X-Requested-With': 'XMLHttpRequest'},
                //     params: {
                //         tokenId: _token
                //     }
                // }).then(function (res) {
                //     if (res.data.statusCode == 200) {
                //         _this.tableData = res.data.content.records;
                //         _this.$message.success(res.data.desc);
                //     } else {
                //         _this.$message.error("加载失败！请重新加载...");
                //     }
                // }).catch(function (catchres) {
                //     _this.$message.error("加载失败！请重新加载...");
                // })
            },
            EditUser( row) {
                let _this = this;
                let _token = sessionStorage.getItem("tokenId");
                _this.isDialog = true;
                _this.dialogTitle = '编辑用户';
                this. dialogList = {
                    address: row.address,
                    birthday: row.birthday,
                    createTime: row.createTime,
                    deptId: row.deptId,
                    gender: row.gender,
                    id: row.id,
                    idNo: row.idNo,
                    menus: row.menus,
                    name: row.name,
                    password: row.password,
                    phone: row.phone,
                    photo: row.photo,
                    postId: row.postId,
                    qqNo: row.qqNo,
                    remark: row.remark,
                    roles: row.roles,
                    telephone: row.telephone,
                    username: row.username,
                    wxNo: row.wxNo
                }


                // this.$http({
                //     url: '/api/adscm/system/user/allUserPage/1/1000000',
                //     method: 'post',
                //     headers: {'X-Requested-With': 'XMLHttpRequest'},
                //     params: {
                //         tokenId: _token
                //     }
                // }).then(function (res) {
                //     if (res.data.statusCode == 200) {
                //         _this.tableData = res.data.content.records;
                //         _this.$message.success(res.data.desc);
                //     } else {
                //         _this.$message.error("加载失败！请重新加载...");
                //     }
                // }).catch(function (catchres) {
                //     _this.$message.error("加载失败！请重新加载...");
                // })
            },
            DelUser( row) {
                let _this = this;
                let _token = sessionStorage.getItem("tokenId");

                this.$confirm('确认删除吗?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    _this.$message.success('');
                }).catch(() => { });

                // this.$http({
                //     url: '/api/adscm/system/user/allUserPage/1/1000000',
                //     method: 'post',
                //     headers: {'X-Requested-With': 'XMLHttpRequest'},
                //     params: {
                //         tokenId: _token
                //     }
                // }).then(function (res) {
                //     if (res.data.statusCode == 200) {
                //         _this.tableData = res.data.content.records;
                //         _this.$message.success(res.data.desc);
                //     } else {
                //         _this.$message.error("加载失败！请重新加载...");
                //     }
                // }).catch(function (catchres) {
                //     _this.$message.error("加载失败！请重新加载...");
                // })
            },
            handleAvatarSuccess(res, file) {
                this.dialogList.photo = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isGIF = file.type === 'image/gif';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isGIF && !isPNG) {
                    this.$message.error('上传图片必须是JPG/GIF/PNG/格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return (isJPG || isGIF || isPNG) && isLt2M;

            },
            submitDialogList(){

            }
        }
    }
</script>
<style>

    .slot-company-info-table td {
        padding: 0;
    }

    .slot-company-info-table th {
        padding: 3px 0;
    }

    .slot-company-info-table th > .cell,
    .slot-company-info-table td > .cell {
        padding-left: 0;
        padding-right: 0;
    }

    .slot-company-info-table th > .cell {
        color: #000;
        font-weight: bold;
    }

    .slot-company-info-table .slot-btn-top {
        margin-bottom: 10px;
    }

    .slot-company-info-table .serch-parent.el-input {
        width: 200px;
    }

    .slot-company-info-table input {
        height: 32px;
        line-height: 32px;
    }

    .slot-company-info-table .el-pagination {
        position: fixed;
        bottom: 20px;
    }

    .slot-company-info-table .el-dialog {
        width: 500px;
    }

    .slot-company-info-table .el-dialog__body {
        padding: 0 20px;
    }

    .slot-company-info-table .el-form-item {
        margin-bottom: 4px;
    }

    .slot-company-info-table .el-form-item__label {
        width: 85px !important;
    }

    .slot-company-info-table .el-form-item__content {
        margin-left: 85px !important;
    }

    .slot-company-info-table .demo-form-inline {
        overflow: hidden;
    }

    .slot-company-info-table .demo-form-inline > .el-form-item {
        width: 220px;
        float: left;
        overflow: hidden;
    }

    .slot-company-info-table .demo-form-inline > .el-form-item .el-form-item__label {
        width: 60px;
        margin-left: 0 !important;
        float: left;
    }

    .slot-company-info-table .demo-form-inline > .el-form-item .el-form-item__content {
        width: 135px;
        margin-left: 0 !important;
        float: left;
    }

    .slot-company-info-table .el-dialog__body .el-input__inner{
        padding-left: 5px;
    }

    .slot-company-info-table .picker-date input{
        padding-left: 30px !important;
    }

    .slot-company-info-table .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .slot-company-info-table .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .slot-company-info-table .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .slot-company-info-table .avatar {
        width: 50px;
        height: 50px;
        display: block;
    }

    .slot-company-info-table .el-form-item__content{
        line-height: 15px;
    }
</style>
